import { useRef,useEffect} from 'react'
import * as echarts from 'echarts'
import {getMoney} from '@/utils/money'
type PieItem = { name: string, value: number }
export default function LineChart(props:{
  data: PieItem[]
}){
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: (x:{name: string,value: number,percent: number})=>{
        const {name,value,percent} = x
        return `${name}: ￥${getMoney(value)} 占比 ${percent}%`
      }
    },
    grid: [{ left: 16, top: 0, right: 16, bottom: 16 }],
    series: [
      {
        name: '类目占比',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        data:[] as Array<PieItem>,
      }
    ]
  }
  const chartRef = useRef(null)
  useEffect(() => {
    const myChart = echarts.init(chartRef.current)
    option.series[0].data = props.data
    myChart.setOption(option)

    return () => {
      myChart.dispose();
    };
  }, [props.data]);
  return <div ref={chartRef} style={{ width: '100%', height: '80vw' }} />;
}